<template>
	<div
		class="fixed top-1/4 left-1/2 translate-x-[-50%] w-[340px] h-[270px] text-sm bg-white dark:bg-zinc-800 rounded border border-zinc-200 dark:border-zinc-900 shadow-2xl"
	>
		<div class="flex items-center h-5 text-left px-1 mb-1">
			<span class="flex-1 dark:text-zinc-200">请完成安全验证</span>
			<m-svg-icon
				name="refresh"
				fillClass="fill-zinc-900 dark:fill-zinc-200"
				class="w-3 h-3 p-0.5 rounded-sm duration-300 curp hover:bg-zinc-200 dark:hover:bg-zinc-900"
				@click="onReset"
			></m-svg-icon>
			<m-svg-icon
				name="close"
				fillClass="fill-zinc-900 dark:fill-zinc-200"
				class="ml-2 w-3 h-3 p-0.5 rounded-sm duration-300 curp hover:bg-zinc-200 dark:hover:bg-zinc-900"
				@click="onClose"
			></m-svg-icon>
		</div>

		<div id="captcha"></div>
	</div>
</template>

<script setup>
import '@/vendor/SliderCaptcha/longbow.slidercaptcha.min.js'
import '@/vendor/SliderCaptcha/slidercaptcha.min.css'
import { onMounted } from 'vue'

const emits = defineEmits(['close', 'success'])

let captcha = null
const onReset = () => {
	captcha.reset()
}
const onClose = () => {
	emits('close')
}

onMounted(() => {
	captcha = sliderCaptcha({
		id: 'captcha',
		onSuccess: () => {
			emits('success')
		},
		onFail: () => {
			console.log('验证失败')
		},
		verify: () => {
			return true
		},
	})
})
</script>

<style scoped lang="scss"></style>
